<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: "",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const selectedDifficulty = ref(props.modelValue);

const difficultyOptions = [
  { value: 1, label: "简单" },
  { value: 2, label: "中等" },
  { value: 3, label: "困难" },
];

const handleChange = (value) => {
  emit("update:modelValue", value);
  emit("change", value);
};

// 监听外部 modelValue 变化
watch(() => props.modelValue, (newValue) => {
  selectedDifficulty.value = newValue;
});
</script>
<template>
  <el-select
    v-model="selectedDifficulty"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="item in difficultyOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
